<style scoped>
</style>
<!-- 对 divider 组件的编辑 -->
<template>
  <div class="google-edit" v-if="dialogShow">
    <SetDesignDialog :title="name" :dialogVisible="dialogShow" :close="close" :saveclose="saveclose"
      ref="settingComponentDialog">
      <el-divider content-position="left">设置</el-divider>
      <el-row style="width:540px;">
        <el-col :span="12">
          <el-form :label-width="formLabelWidth" @submit.native.prevent>
            <el-form-item label="宽度" style="margin-bottom:0px;">
              <el-input @blur="blurConfigWidth" size="mini" style="width:80px;" v-model="data.config.width"
                maxlength="12">
              </el-input>
              <span class="tip-color1">例如：100% </span>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="12">
          <el-form :label-width="formLabelWidth" @submit.native.prevent>
            <el-form-item label="高度" style="margin-bottom:0px;">
              <el-input @blur="blurConfigHeight" size="mini" style="width:80px;" v-model="data.config.height"
                maxlength="12">
              </el-input>
              <span class="tip-color1">例如：100px </span>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <el-row v-if="data.config.width !== '100%'" style="width:540px;">
        <el-col :span="24">
          <TextAlign :formLabelWidth="formLabelWidth" :defValue="data.config.textAlign"
            :chgValue="(d)=>{data.config.textAlign = d}" />
        </el-col>
      </el-row>
      <el-row style="width:540px;">
        <el-col :span="24">
          <el-form :label-width="formLabelWidth">
            <el-form-item label="定位方式" style="margin-bottom:0px;">
              <el-radio-group v-model="data.config.posType">
                <el-radio :label="1">地址定位</el-radio>
                <el-radio :label="2">坐标定位</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <el-row style="width:540px;">
        <el-col :span="24">
          <el-form v-if="parseInt(data.config.posType) === 1" :label-width="formLabelWidth" @submit.native.prevent>
            <el-form-item label="地址" style="margin-bottom:0px;">
              <el-input size="mini" v-model="data.config.address">
              </el-input>
            </el-form-item>
          </el-form>
          <el-form v-if="parseInt(data.config.posType) === 2" :label-width="formLabelWidth" @submit.native.prevent>
            <el-form-item label="坐标" style="margin-bottom:0px;">
              <el-input size="mini" style="width:120px;" maxlength="24" v-model="data.config.long"></el-input>
              <el-input size="mini" style="width:120px;" maxlength="24" v-model="data.config.lat"></el-input>
              <span style="margin-left:12px;">
                <el-tooltip class="item" effect="dark" content="地图上右键点击 '这儿有什么？' 获取坐标值！" placement="top-start">
                  <a target="_blank" href="https://www.google.com/maps/">Google地图</a>
                </el-tooltip>
              </span>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>

      <el-row style="width:540px;">
        <el-col :span="12">
          <el-form :label-width="formLabelWidth">
            <el-form-item label="是否标记" style="margin-bottom:0px;">
              <el-radio-group v-model="data.config.marker">
                <el-radio :label="1">标记</el-radio>
                <el-radio :label="0">不标记</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="12">
          <el-form :label-width="formLabelWidth">
            <el-form-item label="缩放" style="margin-bottom:0px;">
              <el-select style="width:120px;" size="mini" v-model="data.config.zoom" placeholder="请选择">
                <el-option label="1(最远)" :value="1"></el-option>
                <el-option label="2" :value="2"></el-option>
                <el-option label="3" :value="3"></el-option>
                <el-option label="4" :value="4"></el-option>
                <el-option label="5" :value="5"></el-option>
                <el-option label="6" :value="6"></el-option>
                <el-option label="7" :value="7"></el-option>
                <el-option label="8" :value="8"></el-option>
                <el-option label="9" :value="9"></el-option>
                <el-option label="10" :value="10"></el-option>
                <el-option label="11" :value="11"></el-option>
                <el-option label="12" :value="12"></el-option>
                <el-option label="13" :value="13"></el-option>
                <el-option label="14" :value="14"></el-option>
                <el-option label="15" :value="15"></el-option>
                <el-option label="16" :value="16"></el-option>
                <el-option label="17" :value="17"></el-option>
                <el-option label="18" :value="18"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <el-row style="width:540px;margin-bottom: 24px;">
        <el-col :span="24">
          <el-form :label-width="formLabelWidth" @submit.native.prevent>
            <el-form-item label="地图说明" style="margin-bottom:0px;">
              <el-input size="mini" maxlength="64" type="textarea" :rows="2" v-model="data.config.content"></el-input>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </SetDesignDialog>
  </div>
</template>

<script>
import SetDesignDialog from '@/components/common/dialog/SetDesignDialog.vue'
import TextAlign from '@/components/common/design/dialog/component/formitem/TextAlign.vue'
import * as WindowType from '@/config/windowtype.js'
// import * as PubsubType from '@/config/pubsubtype.js'
import VueFunctions from '@/core/VueFunctions.js'
import BackendjsFunctions from '@/core/BackendjsFunctions.js'
import { mapState } from 'vuex'
// import PubSub from 'pubsub-js'
import _ from 'lodash'

export default {
  computed: {
    ...mapState([
      'design'
    ])
  },
  created () {
    VueFunctions.method(WindowType.EDIT_COMPONENT_WITH_COMPONENTGOOGLEMAP, (bjComponent) => {
      this.close()
      this.dialogShow = true
      this.bjComponent = bjComponent
      this.data = bjComponent.render.data

      // coding ...
      if (!this.data.config.width) {
        this.data.config.width = '100%'
      }

      // coding ...
      if (!this.data.config.height) {
        this.data.config.height = '350px'
      }

      this.$nextTick(() => {
        this.$refs['settingComponentDialog'].open()
      })
    })
  },
  mounted () {
    // PubSub.subscribe(PubsubType.PUBSUB_DIGLOG_COMPONENT_CLOSE, (event, data) => {
    //   this.close()
    // })
    // PubSub.subscribe(PubsubType.PUBSUB_DIGLOG_COMPONENT_AND_CONTAINER_CLOSE, (event, data) => {
    //   this.close()
    // })
  },
  data () {
    return {
      dialogShow: false,
      formLabelWidth: '80px',
      name: '谷歌地图',
      bjComponent: null,
      data: null
    }
  },
  watch: {
  },
  methods: {
    blurConfigWidth () {
      let value = parseInt(this.data.config.width)
      if (isNaN(value)) {
        value = 100
      } else if (value > 100) {
        value = 100
      } else if (value < 1) {
        value = 100
      }
      this.data.config.width = value + '%'
    },
    blurConfigHeight () {
      let value = this.data.config.height
      if (/^-?(\d|\.)+$/.test(value)) {
        this.data.config.height = value + 'px'
      }
      if (value === '') {
        this.data.config.height = '350px'
      }
    },
    // .............
    close () {
      this.dialogShow = false
      this.bjComponent = null
      this.data = null
    },
    saveclose () {
      this.bjComponent.render.data = _.cloneDeep(this.data)
      BackendjsFunctions.saveComponent(this.bjComponent)
      this.close()
    }
  },
  components: {
    SetDesignDialog,
    TextAlign
  }
}

</script>
